<template>
  <AppHeader
    title="单项选择"
    :banAnimate="true"
    backgroundColor="rgba(0,0,0,0)"
    titleColor="#ffffff"
  >
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-arrow-left-white.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
    <div class="top-bg">
      <div class="score">{{form.score}}</div>
      <div class="success-txt">
        <span>作业提交成功</span>
        <img src="@/assets/images/listening/icon-done.png" />
      </div>
    </div>
    <div class="score-details">
      <van-cell title="总分" :value="form.full_score || 0" />
      <van-cell title="作答用时" :value="form.use_time" />
      <van-cell title="查看详情" is-link @click="handleClickDetails" />
      <div class="submit-btn">
        <span class="btn" @click="handleSubmit">完成</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import {onMounted,ref} from 'vue'
const router = useRouter();
const form = ref({})
const onClickLeft = () => {
  router.back();
};
onMounted(()=>{
  form.value = JSON.parse(sessionStorage.getItem('successObj'))
})
const handleClickDetails = () => {
    router.push('/writtenTest/singleScoreDetails')
};
const handleSubmit = () => { 
  router.push({
    path: "/writtenTest/detailsUnit",
    query: JSON.parse(sessionStorage.getItem('query')),
  });
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #f5f5f5;
  background: url(/src/assets/images/listening/work-bg.png) top no-repeat;
    background-size: 100% 320px;
    overflow-y: auto;
  .top-bg {
    height: 375px;
    padding-top: 90px;
   
    text-align: center;
    color: #fff;
    .score {
      font-size: 66px;
      margin-bottom: 20px;
    }
    .comments {
      font-size: 18px;
      margin-bottom: 30px;
      letter-spacing: 2px;
    }
    .success-txt {
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-right: 10px;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
  }

  .score-details {
    padding-top: 10px;
    width: calc(100% - 20px);
    height: 230px;
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 300px;
    border-radius: 15px;
    .submit-btn {
      width: 100%;
      position: absolute;
      background-color: #fff;
      padding: 10px 0;
      left: 0;
      bottom: 10px;
      text-align: center;
      .btn {
        width: calc(100% - 20px);
        height: 45px;
        line-height: 45px;
        display: inline-block;
        background: linear-gradient(270deg, #29f19c 0%, #02a1f9 100%);
        border-radius: 23px;
        text-align: center;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}
</style>
